<template>
	<div>
		<view class="notice" @click="toggleShow">
			预定须知
			<image class="img" :src="`${imgBaseUrl}arrow-right-gray.png`" />
		</view>
		<up-popup :show="show" round="12" @close="toggleShow" :close-on-click-overlay="false">
			<view>
				<view class="order-notice">
					<view class="display_name">{{ display_name }}</view>
					<view class="sale_labels">
						<view
							class="label"
							:style="{ color: item.color, borderColor: item.color }"
							v-for="(item, index) in sale_labels"
							:key="index"
						>
							{{ item.title }}
						</view>
					</view>
					<view class="content-wrap">
						<view class="use_rule" v-if="use_rule?.suitable_human_switch">
							<view class="title card-title">适用人群</view>
							<view class="content">{{ handleSuitableHumans(use_rule.suitable_humans) }}</view>
						</view>
						<view v-if="hasSaleTips" class="section">
							<view class="notice-title card-title">购买须知</view>
							<view class="sale_tips">
								<view class="sale_tips_item" v-for="(item, index) in sale_tips" :key="index">
									<view class="label">{{ item.title }}</view>
									<view class="content">{{ item.content }}</view>
								</view>
							</view>
						</view>
						<template v-if="hasBookingTips">
							<view
								class="section booking-tips-section"
								v-for="(item, index) in booking_tips"
								:key="index"
							>
								<view class="price-title card-title">{{ item.title }}</view>
								<view
									class="content"
									:class="{
										'booking-tips-content': bookingTipsContentToArray(item.content)?.length > 1,
									}"
									v-for="(str, idx) in bookingTipsContentToArray(item.content)"
									:key="idx"
								>
									{{ str }}
								</view>
							</view>
						</template>
					</view>
				</view>
				<view class="btn">
					<zjy-button @click="toggleShow">关闭</zjy-button>
				</view>
			</view>
		</up-popup>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import type { SaleTips, UserRule } from "@/types/ticket"

interface OrderNoticeProps {
	display_name: string
	use_rule: UserRule
	sale_tips: SaleTips[]
	booking_tips: Array<{ title: string; content: string }>
}

const props = defineProps<OrderNoticeProps>()

const show = ref(false)
const imgBaseUrl = inject("imgBaseUrl")

const hasSaleTips = computed(() => !!props.sale_tips?.length)
const hasBookingTips = computed(() => !!props.booking_tips?.length)
const sale_labels = computed(() => props.sale_tips?.filter?.((item) => item.display_label))

const bookingTipsContentToArray = (str: string) => str.split("\n").filter(Boolean)

const toggleShow = () => {
	show.value = !show.value

	uni.$emit("submit-order-popup-visible", show.value)
}
const handleSuitableHumans = (list: OrderNoticeProps["use_rule"]["suitable_humans"]) =>
	list.reduce((pre, cur) => `${pre}${cur.title}:${cur.content};`, "")
</script>

<script lang="ts">
export default {
	options: { styleIsolation: "shared" },
}
</script>

<style lang="scss" scoped>
.card-title {
	font-weight: 600;
	font-size: 32rpx;
	color: rgba(0, 0, 0, 0.9);
	line-height: 52rpx;
}

.notice {
	display: inline-flex;
	align-items: center;
	font-size: 24rpx;
	color: #86909c;
	line-height: 34rpx;

	.img {
		width: 16rpx;
		height: 16rpx;
		margin-left: 4rpx;
	}
}

.order-notice {
	position: relative;
	padding: 40rpx 24rpx;
	padding-bottom: 0;
	word-break: break-all;

	.display_name {
		margin-bottom: 16rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #1d2129;
		line-height: 50rpx;
	}

	.sale_labels {
		display: flex;
		align-items: center;
		padding-bottom: 12rpx;

		.label {
			display: inline-flex;
			align-items: center;
			padding: 4rpx 8rpx;
			margin-right: 8rpx;
			border-radius: 8rpx;
			border: 1rpx solid #e9eaee;
			font-size: 20rpx;
			color: #86909c;
			line-height: 28rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.content-wrap {
		max-height: 846rpx;
		overflow-y: auto;
	}

	.use_rule {
		margin-top: 52rpx;

		.title {
			margin-bottom: 18rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.9);
			line-height: 52rpx;
		}

		.content {
			padding: 20rpx 16rpx 20rpx 22rpx;
			background: rgba(254, 224, 56, 0.1);
			border-radius: 16rpx;
			font-weight: 350;
			font-size: 28rpx;
			color: #303133;
			line-height: 44rpx;
		}
	}

	.section {
		margin-top: 40rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #f3f3f3;

		.notice-title {
			margin-bottom: 24rpx;
		}

		.price-title {
			margin-bottom: 16rpx;
		}

		.content {
			position: relative;
			font-weight: 400;
			font-size: 28rpx;
			color: #4e5969;
			line-height: 40rpx;
		}

		.booking-tips-content {
			padding-left: 20rpx;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 8rpx;
				margin-top: 16rpx;
				background: #e7e7e7;
				border-radius: 50%;
			}
		}

		.sale_tips {
			&_item {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					min-width: 112rpx;
					padding: 6rpx 8rpx 4rpx;
					border-radius: 8rpx;
					border: 1rpx solid #e5e6eb;
					text-align: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #1d2129;
					line-height: 36rpx;
				}

				.content {
					margin-left: 24rpx;
				}
			}
		}
	}
}

.btn {
	padding: 24rpx 24rpx 0;

	::v-deep .zjy-button {
		font-weight: 600 !important;
	}
}
</style>
